<template>
  <div>
    <el-menu default-active="2">
      <Item v-for="(item, index) in menus" :key="index" :node="item" />
    </el-menu>
  </div>
</template>

<script>
import Item from "./components/Item.vue";

export default {
  components: {
    Item,
  },
  data() {
    return {
      menus: [
        {
          id: "1",
          name: "导航1",
          children: [
            {
              id: "1-1",
              name: "导航1.1",
              children: [
                { id: "1-1-1", name: "导航1.1.1" },
                { id: "1-1-2", name: "导航1.1.2" },
              ],
            },
            {
              id: "1-2",
              name: "导航1.2",
            },
          ],
        },
        { id: "2", name: "导航2" },
        { id: "3", name: "导航3" },
        { id: "4", name: "导航4" },
      ],
    };
  },
};
</script>

<!-- 
  如果要修改其他组件内部的样式，需要注意在当前有 scoped 的情况下，可能会不生效，不生效需要处理 :deep
 -->
<style scoped>
:deep(.el-menu-item.is-active) {
  color: red;
}
</style>
